import type { RoadManageOptionsPropsType, FormValuesType } from './typings'
import { defineComponent, ref, reactive, onMounted } from 'vue'
import {
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElRow,
  ElCol,
  ElMessage
} from 'element-plus'
import type { FormInstance } from 'element-plus'
import useVuexGetters from '~/hooks/useVuexGetters'
import type { workAreaEnum } from '~/store/assetManagement/assetAreaManage/typings'
import { useStore } from 'vuex'
import styles from '../../index.module.scss'
export default defineComponent({
  name: 'RoadManaegeOptions',
  props: ['record', 'type', 'visible', 'cancel'],
  setup(props: RoadManageOptionsPropsType) {
    const store = useStore()
    const ruleFormRef = ref<FormInstance>()
    const assetWorkAreaState = useVuexGetters('assetWorkArea', ['workAreaSelectList'])
    const RoadManageForm = reactive<FormValuesType>({ ...(props?.record || {}) })

    onMounted(async () => {
      if (props.type === 'update') {
        const result = await store.dispatch('roadManage/RoadInfo', {
          id: props?.record?.id
        })
        if (result?.data) {
          Object.assign(RoadManageForm, result?.data)
        }
      }
    })
    // 提交表单
    const handleSubmitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.validate(async (valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(RoadManageForm))
          const res = await store.dispatch(
            props.type === 'add'
              ? 'roadManage/AddRoadManageInfo'
              : 'roadManage/UpdateRoadManageInfo',
            params
          )
          if (res?.code === 200) {
            ElMessage({ type: 'success', message: '操作成功' })
            props.cancel()
          }
        } else {
          return false
        }
      })
    }
    // style={'max-width:460px'}
    return () => {
      return (
        <ElDialog
          title={`${props?.record?.id ? '编辑' : '新增'}分组`}
          modelValue={!!props.visible}
          append-to-body
          width="42%"
          closeOnClickModal={false} // 点遮罩层不关弹窗
          draggable // 可拖拽
          beforeClose={props.cancel}
        >
          <ElForm ref={ruleFormRef} model={RoadManageForm} labelWidth="120px" labelPosition="right">
            <ElRow class={styles['form-elRow']}>
              <ElCol>
                <ElFormItem
                  prop="name"
                  label="道路名称："
                  class={styles['asset-home-area-search-bar-form-item']}
                  rules={[
                    { required: true, message: '请输入道路名称', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                  ]}
                >
                  <ElInput v-model={RoadManageForm.name} placeholder="请输入 道路名称"></ElInput>
                </ElFormItem>
              </ElCol>
              <ElCol>
                <ElFormItem
                  prop="workAreaId"
                  label="所属区域："
                  class={styles['asset-home-area-search-bar-form-item']}
                  rules={[{ required: true, message: '请选择所属区域', trigger: 'blur' }]}
                >
                  <ElSelect
                    v-model={RoadManageForm.workAreaId}
                    placeholder="请选择 所属区域"
                    filterable
                    clearable
                  >
                    {assetWorkAreaState.workAreaSelectList?.value?.map((item: workAreaEnum) => (
                      <ElOption key={item?.id} label={item?.name} value={item?.id!} />
                    ))}
                  </ElSelect>
                </ElFormItem>
              </ElCol>
              <ElCol>
                <ElFormItem
                  prop="remark"
                  label="备注："
                  class={styles['asset-home-area-search-bar-form-item']}
                  rules={[{ required: false, message: '请输入道路名称', trigger: 'blur' }]}
                >
                  <ElInput
                    v-model={RoadManageForm.memo}
                    autosize={{ minRows: 6, maxRows: 11 }}
                    type="textarea"
                    placeholder="请输入 备注"
                    clearable
                    show-word-limit
                    {...{ maxlength: 200 }}
                  />
                </ElFormItem>
              </ElCol>
            </ElRow>
          </ElForm>

          <div class={styles['confirm-button']}>
            <ElButton class={styles['confirm-button-cancel']} plain onClick={props.cancel}>
              取 消
            </ElButton>
            <ElButton
              class={styles['confirm-button-submit']}
              type="primary"
              onClick={() => handleSubmitForm(ruleFormRef.value)}
            >
              确 定
            </ElButton>
          </div>
        </ElDialog>
      )
    }
  }
})
